import React from 'react'
import ReactDOM from 'react-dom'
console.log('dfbjiisdhfuisdhfuisdhfui')

// 创建虚拟DOM元素：
// const mydiv = React.createElement(
// 	'h1',
// 	{ title: '啊，五环', id: 'myh1' },
// 	'你比四环多一环'
// )

// const mydiv = (
// 	<div id="" title="div aaa">
// 		这是一个div元素
// 		<h1>这是一个大大的H1</h1>
// 	</div>
// )

// 遍历数组的几种方式
// forEach
const Array = [1, 2, 3, 4, 5]
const strArr = []
Array.forEach((item) => {
	const temp = <h5 key={item}>{item}</h5>
	strArr.push(temp)
})

// map
// const mapArr = Array.map((item) => {
// 	return item + '~~'
// })

let a = '哈哈哈哈'
// 渲染       getElementById与htnl页面的id一致 mydiv为上面创建的常量
// ReactDOM.render(mydiv, document.getElementById('app'))
// react中渲染用单大括号
ReactDOM.render(
	<div title={a}>
		{a}
		<hr />
		{strArr}
		<hr />
		<p>map遍历 key加在最外层的盒子</p>
		{Array.map((item) => {
			return <h6 key={item}>{item}</h6>
		})}
		<hr />
		{Array.map((item) => (
			<div key={item}>
				<h6>{item}</h6>
			</div>
		))}
	</div>,
	document.getElementById('app')
)
